<title>项目维护</title>

<link rel="stylesheet" href="/static/public/vendor/bootstrap-select/bootstrap-select.css">
<link rel="stylesheet" href="/static/public/vendor/bootstrap-daterangepicker/daterangepicker.css"/>
<div class="page-content">
    <div class="collapse in" id="collapseFilter" aria-expanded="true">
        <div class="panel">
            <div class="panel-body">
                <form class="form-inline" id="projectForm">
                    <div class="form-group">
                        <div class="input-daterange input-group">
                            <span class="input-group-addon"><i class="icon wb-calendar" aria-hidden="true"></i></span>
                            <input type="text" class="form-control" id="filter-date" placeholder="创建日期">
                            <input type="hidden" name="startDate">
                            <input type="hidden" name="endDate">
                            <a class="input-group-addon padding-horizontal-10" role="button">
                                <i class="icon wb-close date-close"></i></a>
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-success"><i class="icon fa-search"></i> 查找</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-body">
            <table class="table table-bordered table-hover dataTable table-striped width-full text-nowrap"
                   id="dataTableExample">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>项目名称</th>
                    <th>状态</th>
                    <th>创建日期</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script src="/static/public/vendor/bootstrap-select/bootstrap-select.min.js"></script>


<script type="text/javascript">
    function openDialog() {
        Dialog.open("新建项目", "/sys/project/edit");
    }

    var $table = null;
    $(function () {
        setTimeout(function () {
            $('#filter-date').daterangepicker(
                {
                    // startDate: moment().startOf('day'),
                    //endDate: moment(),
                    //minDate: '01/01/2012',    //最小时间
                    maxDate: moment(), //最大时间
                    dateLimit: {
                        days: 30
                    }, //起止时间的最大间隔
                    showDropdowns: false,
                    showWeekNumbers: false, //是否显示第几周
                    timePicker: true, //是否显示小时和分钟
                    timePickerIncrement: 60, //时间的增量，单位为分钟
                    timePicker12Hour: false, //是否使用12小时制来显示时间
                    ranges: {
                        //'最近1小时': [moment().subtract('hours',1), moment()],
                        '今日': [moment().startOf('day'), moment()],
                        '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                        '最近7日': [moment().subtract('days', 6), moment()],
                        '最近30日': [moment().subtract('days', 29), moment()]
                    },
                    opens: 'right', //日期选择框的弹出位置
                    buttonClasses: ['btn btn-default'],
                    applyClass: 'btn-small btn-primary blue',
                    cancelClass: 'btn-small',
                    format: 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
                    separator: ' to ',
                    locale: {
                        applyLabel: '确定',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        customRangeLabel: '自定义',
                        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                            '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        firstDay: 1
                    }
                }, function (start, end, label) {//格式化日期显示框
                    $('#filter-date span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
                });
        }, 100);
        $table = $('#dataTableExample').DataTable($.po('dataTable', {
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "columns": [
                {"data": "id", "bSortable": false},
                {"data": "name"},
                {"data": "state"},
                {"data": "createTime"},
                {"data": "createTime"}
            ],
            "columnDefs": [{
                "render": function (data, type, row) {
                    return Date.format(new Date(data), "yyyy-MM-dd hh:mm:ss");
                },
                "targets": 3
            }, {
                "render": function (data, type, row) {
                    if (data == "1") {
                        return "有效";
                    } else {
                        return "无效";
                    }
                },
                "targets": 2
            }, {
                "render": function (data, type, row) {
                    return '<span class="btn btn-pure btn-icon" onclick="edit(' + row.id + ')"><i class="icon wb-edit" aria-hidden="true"></i></span>';
                },
                "targets": 4
            }],
            "ajax": "/sys/project/getProjectList",
            "dom": '<"dt-dom-toolbar">rt<"bottom"pi>',
            "fnServerData": function (sSource, aoData, fnCallback) {
                var params = [{name: "size", value: aoData[4].value}, {
                    name: "current", value: aoData[3].value / aoData[4].value + 1
                }];
                $.ajax({
                    "dataType": 'json',
                    "type": "post",
                    "url": "/sys/project/getProjectList",
                    "data": params,
                    "success": fnCallback
                });
            }
        }));

        $("div.dt-dom-toolbar").append('<a class="btn btn-success margin-bottom-15"  href="#" onclick="openDialog()"><i class="icon wb-plus" aria-hidden="true"></i>新建</a>');
    });

    function reloadData() {
        $table.ajax.reload();
    }

    function edit(id) {
        Dialog.open("新建编辑", "/sys/project/edit", {id: id});
    }
</script>